<template>
  <div class="table">
    <!-- 表格组件 -->
    <!-- data：表格绑定的数据 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 表格的列 prop：字段名称，表格绑定数组数据的元素中的属性名称  在tabledata里面的属性名称-->
      <!-- label：显示的标题 -->
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column prop="date" label="日期" width="180" />
      <!-- 自定义列模板 -->
      <el-table-column label="图标日期">
        <!-- scope:默认表格列的数据对象 -->
        <template #default="scope">
          <div>
            <el-icon><timer /></el-icon>
            <!-- row:表格这一行中的数据 $index:当前行的索引-->
            <span>{{ scope.row.date }}-{{ scope.$index }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column label="弹出框">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
          <!-- #是v-solt的缩写 这个只能用在template上面  这是default插槽后备内容 -->
            <template #default>
              <div>name: {{ scope.row.name }}</div>
              <div>address: {{ scope.row.address }}</div>
            </template>
            <template #reference>
                <!-- el-tag：创建一个标签 在一行中name的 -->
              <el-tag>{{ scope.row.name }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作">
        <el-button type="info">查看</el-button>
        <el-button type="warning">修改</el-button>
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped></style>
